<template>
  <div>
    <n-grid cols="2" x-gap="12">
      <n-gi :span="12" v-if="itemValue">
        <n-popover trigger="hover">
          <template #trigger>
            {{ refValue }}
          </template>
          <span>{{ refValue }}</span>
        </n-popover>
      </n-gi>
      <n-gi :span="12" v-else>
        &nbsp;
      </n-gi>
      <n-gi :span="6">
        <n-button @click="handlerCopy" v-if="itemValue">复制</n-button>
      </n-gi>
    </n-grid>
  </div>

</template>

<script lang="ts">
  import {defineComponent, onMounted, unref, ref} from 'vue';
  import {useDialog, useMessage} from 'naive-ui';
  import {copyToClipboard} from "@/utils/copyUtils";


  export default defineComponent({
    props: {
      itemValue: {
        type: String,
        default: ''
      },
      onUpdate: {
        type: Function,
        default: null
      },
      itemKey: {
        type: Object,
      },
    },
    setup(props) {
      const refValue = ref("");
      const dialog = useDialog();
      const message = useMessage();


      //处理Copy
      async function handlerCopy() {
        await copyToClipboard(unref(refValue));
        message.success("复制成功")
      }


      onMounted(async () => {
        refValue.value = unref(props).itemValue
      });


      return {
        refValue,
        handlerCopy,
      }
    },
  });
</script>

<style lang="less" scoped></style>
